<template>
	<SlotModal ref='slotModalRef' v-bind='slotModalConfig'>
		<n-scrollbar>
			<div class='modal-container'>
				<Suspense>
					<template v-slot>
						<ModalComponent ref='modalComponentRef' v-bind='props'/>
					</template>
					<template v-slot:fallback>
						<Windows11Loading/>
					</template>
				</Suspense>
			</div>
		</n-scrollbar>
	</SlotModal>
</template>
<script setup lang='ts'>
import { computed, defineAsyncComponent, nextTick, reactive, ref, watch } from 'vue';
import { nanoid } from 'nanoid';
import type {
	CommonFileUpDownLoadProps
} from '#/src/components/customComponents/fileUpLoad/modal/ModalFileUpLoadListProps.d.ts';
import { VxeModalProps } from 'vxe-table';
// --------------------------------------------------------------------------------
const props = defineProps<CommonFileUpDownLoadProps>();
// --------------------------------------------------------------------------------
const SlotModal = defineAsyncComponent(() => import('./SlotModal.vue'));
const Windows11Loading = defineAsyncComponent(
	() => import('@/components/customComponents/loading/Windows11Loading.vue'));
const ModalComponent = defineAsyncComponent(() => import('../Component.vue'));
// --------------------------------------------------------------------------------
const slotModalRef = ref<InstanceType<typeof SlotModal>>();
const modalComponentRef = ref<InstanceType<typeof ModalComponent>>();
// --------------------------------------------------------------------------------
const slotModalConfig = reactive({
	modalId : `FileModal_${nanoid(16)}`,
	// reLoad            : null,
	// onMountedEvent    : null,
	onOpenModalEvent  : () => onOpenModalEvent(),
	onCloseModalEvent : () => onCloseModalEvent(),
	// onZoomModalEvent  : () => onZoomModalEvent(),
	resetEvent : () => resetEvent()
});
const acceptStr = ref<string>();
// --------------------------------------------------------------------------------
const modalComponentInstance = computed(() => {
	return modalComponentRef.value;
});
watch(modalComponentInstance, (newValue, oldValue) => {
	nextTick(() => {
		modalComponentRef.value?.setAccept(acceptStr!.value);
	});
}, {
	deep      : true,
	immediate : false
});
// --------------------------------------------------------------------------------
const onOpenModalEvent = async () => {
	if (props.fileQuery.enabled) {
		modalComponentRef.value?.initGrid();
	}
};
const onCloseModalEvent = async () => {
	modalComponentRef.value?.cleanData();
	modalComponentRef.value!.gridConfig.data = [];
};
/*const onZoomModalEvent = async () => {console.log('onZoomModalEvent');};*/
const resetEvent = async () => {};
const openModal = async (config: VxeModalProps) => {
	// 遍历props.format属性，将文件类型转换为accept属性的值
	let accept = '';
	props.fileUpLoad.format.forEach((item: string, index: number) => {
		if (index === props.fileUpLoad.format.length) {
			accept += `.${item}`;
		} else {
			accept += `.${item},`;
		}
	});
	// 设置好文件类型
	acceptStr.value = accept;
	slotModalRef.value?.openModal(config);
};
// 导出方法
defineExpose({ openModal, modalComponentRef });
</script>